<template>
   <div class="loginBody">
     <div class="loginDiv">
       <div class="login-content">
         <h1 class="login-title">登录</h1>

         <el-form :model="login_form" label-width="100px" :rules="rules" ref="login_form">
           <el-form-item label="账号" prop="username">
             <el-input style="width: 200px" prefix-icon="el-icon-user-solid" v-model="login_form.username"  size="small"></el-input>
           </el-form-item>

           <el-form-item label="密码" prop="password">
             <el-input style="width: 200px" v-model="login_form.password" show-password prefix-icon="el-icon-lock"  size="small" ></el-input>
           </el-form-item>

           <el-form-item label="用户" prop="userType">
             <el-select v-model="login_form.userType" style="width: 200px" size="small" placeholder="请选择用户类型">
               <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
               </el-option>
             </el-select>
           </el-form-item>

           <el-form-item class="el-form-item--right">
             <el-button type="primary" round @click="subForm">登录</el-button>
             <el-button type="info" round @click="resetForm">重置</el-button>
           </el-form-item>

           <el-form-item class="el-form-item--right-login">
             <a href="#" @click.prevent="goToRegister">没有账号？去注册</a>
           </el-form-item>
         </el-form>
       </div>
     </div>
   </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {

      options: [{
        value: 0,
        label: '读者'
      }, {
        value: 1,
        label: '管理员'
      }],

      login_form: {
        username: '',
        password: '',
        userType: ''
      },

      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'blur' },
        ]
      }

    }
  },

  methods: {

    subForm(){
      this.$refs.login_form.validate((valid) => {
        if (valid) {
          //调用用户登录方法
            this.userLogin()
        } else {
          this.$message.error('登录失败');
          return false;
        }
      });
    },

    async userLogin(){
      let {data:res} = await this.$axios.post("login/userLogin",this.login_form)
      if (res.success){
        console.log(res.data)
        this.$message.success('登录成功')
        window.localStorage.setItem("token",res.data.token)
        window.sessionStorage.setItem("username",res.data.username)
        window.sessionStorage.setItem("realname",res.data.realname)
        window.sessionStorage.setItem("sex",res.data.sex)
        window.sessionStorage.setItem("birthday",res.data.birthday)
        window.sessionStorage.setItem("tel",res.data.tel)
        window.sessionStorage.setItem("email",res.data.email)
        window.sessionStorage.setItem("readernumber",res.data.readernumber)
        window.sessionStorage.setItem("address",res.data.address)
        window.sessionStorage.setItem("registerdate",res.data.registerdate)
        window.sessionStorage.setItem("icon",res.data.icon)
        window.sessionStorage.setItem("id",res.data.id)
        if (res.data.role==='0'){
          await this.$router.push('/readerIndex')
        }else {
          await this.$router.push('/index')
        }
      }else {
        this.$message.error('账号或密码错误！')
      }
    },

    resetForm(){
      this.$refs.login_form.resetFields();
    },

    goToRegister(){
      this.$router.push('/register')
    }
  }
}

</script>

<style scoped>
.loginBody {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,pink,skyblue);
  background-size: 100% 100%;
}
.loginDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -220px;
  /*width: 450px;*/
  height: 360px;
  background: #fff;
  border-radius: 5%;

}
.login-title {
  margin: 20px 0;
  text-align: center;
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变颜色 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-content {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 25px;
  left: 25px;
}
.el-form-item--right {
  margin-left: 38px;
}
.el-form-item--right-login {
  margin-left: 42px;
}
</style>